<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard 诊断工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .diagnostic-item {
            background: white;
            padding: 15px;
            margin: 10px 0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .success { border-left: 4px solid #52c41a; }
        .warning { border-left: 4px solid #faad14; }
        .error { border-left: 4px solid #ff4d4f; }
        .info { border-left: 4px solid #1890ff; }
        pre {
            background: #f5f5f5;
            padding: 10px;
            border-radius: 4px;
            overflow-x: auto;
        }
        .btn {
            background: #1890ff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        .btn:hover {
            background: #40a9ff;
        }
    </style>
</head>
<body>
    <h1>🔧 Dashboard 诊断工具</h1>
    
    <div class="diagnostic-item info">
        <h3>📋 检查步骤</h3>
        <ol>
            <li>确认前端项目已启动 (npm run dev)</li>
            <li>检查浏览器控制台是否有错误</li>
            <li>验证路由配置是否正确</li>
            <li>检查组件导入是否有问题</li>
        </ol>
    </div>

    <div class="diagnostic-item">
        <h3>🌐 网络连接测试</h3>
        <button class="btn" onclick="testConnection()">测试前端服务</button>
        <button class="btn" onclick="testBackend()">测试后端服务</button>
        <div id="connection-results"></div>
    </div>

    <div class="diagnostic-item">
        <h3>📁 文件结构检查</h3>
        <pre>src/
├── views/
│   ├── DashboardSimple.vue    ✅ 简化版首页
│   ├── Dashboard.vue          ⚠️ 原版首页（可能有问题）
│   └── ...
├── router/
│   └── index.js              ✅ 路由配置
└── App.vue                   ✅ 主组件</pre>
    </div>

    <div class="diagnostic-item">
        <h3>🔍 常见问题排查</h3>
        <div class="error">
            <h4>❌ 图标导入错误</h4>
            <p>问题：TrendCharts 图标不存在</p>
            <p>解决：已替换为 ArrowUp 图标</p>
        </div>
        
        <div class="warning">
            <h4>⚠️ ECharts 依赖问题</h4>
            <p>问题：ECharts 组件可能未正确导入</p>
            <p>解决：使用简化版图表（CSS实现）</p>
        </div>
        
        <div class="info">
            <h4>ℹ️ 路由配置</h4>
            <p>当前路由：/ → /dashboard → DashboardSimple.vue</p>
        </div>
    </div>

    <div class="diagnostic-item">
        <h3>🛠️ 解决方案</h3>
        <ol>
            <li><strong>使用简化版首页</strong>：已创建 DashboardSimple.vue</li>
            <li><strong>移除复杂依赖</strong>：不使用 ECharts，改用 CSS 图表</li>
            <li><strong>修复图标问题</strong>：替换不存在的图标</li>
            <li><strong>简化数据获取</strong>：使用静态数据，避免 API 调用</li>
        </ol>
    </div>

    <div class="diagnostic-item">
        <h3>📝 手动检查清单</h3>
        <label><input type="checkbox"> 1. 浏览器控制台无错误</label><br>
        <label><input type="checkbox"> 2. 路由 /dashboard 可访问</label><br>
        <label><input type="checkbox"> 3. 页面显示 "系统首页" 标题</label><br>
        <label><input type="checkbox"> 4. 5个数据卡片正常显示</label><br>
        <label><input type="checkbox"> 5. 图表区域正常显示</label><br>
        <label><input type="checkbox"> 6. 响应式布局正常</label><br>
    </div>

    <script>
        function testConnection() {
            const results = document.getElementById('connection-results');
            results.innerHTML = '<p>🔄 测试中...</p>';
            
            fetch('http://localhost:3000')
                .then(response => {
                    if (response.ok) {
                        results.innerHTML = '<p class="success">✅ 前端服务正常运行</p>';
                    } else {
                        results.innerHTML = '<p class="error">❌ 前端服务响应异常</p>';
                    }
                })
                .catch(error => {
                    results.innerHTML = '<p class="error">❌ 无法连接到前端服务</p>';
                });
        }
        
        function testBackend() {
            const results = document.getElementById('connection-results');
            results.innerHTML = '<p>🔄 测试中...</p>';
            
            fetch('http://localhost:8080/user/findUserList', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({})
            })
                .then(response => {
                    if (response.ok) {
                        results.innerHTML = '<p class="success">✅ 后端服务正常运行</p>';
                    } else {
                        results.innerHTML = '<p class="warning">⚠️ 后端服务响应异常</p>';
                    }
                })
                .catch(error => {
                    results.innerHTML = '<p class="error">❌ 无法连接到后端服务</p>';
                });
        }
    </script>
</body>
</html>
